<template>
    <div class="body">
        <!-- 课程简介 -->
        <div class="summary" :style="{backgroundImage: 'url(' + summaryBK +')'}" style="background-size: cover">
            <a-row>
                <a-col :span="16" class="summary-item">
                    <a-breadcrumb>
                        <template #separator><span style="color: white">></span></template>
                        <a-breadcrumb-item><a style="color:white;" href="#">首页</a></a-breadcrumb-item>
                        <a-breadcrumb-item><a style="color:white;" href="#">全部课程</a></a-breadcrumb-item>
                        <a-breadcrumb-item style="color:white;">{{myData.lessonTitle}}</a-breadcrumb-item>
                    </a-breadcrumb>
                    <h1 style="font-weight: bolder;color: white;margin-top: 20px">{{myData.lessonTitle}}</h1>
                    <a-row justify="space-around" align="middle">
                        <a-col :span="1">
                            <a-image
                                style="margin-left: 0"
                                :src="myData.lessonImg"
                                :preview="false"
                                fallback=""
                            />
                        </a-col>
                        <a-col :span="23">
                            <h4 class="lessonData">{{myData.lecturer}}</h4>
                            <h4 class="lessonData" style="margin-left: 15vh;">难度&nbsp;&nbsp; {{myData.difficulty}}&nbsp;&nbsp;&nbsp;&nbsp;·</h4>
                            <h4 class="lessonData">时长&nbsp;&nbsp;{{myData.lessonTime}}&nbsp;&nbsp;&nbsp;&nbsp;·</h4>
                            <h4 class="lessonData">学习人数&nbsp;&nbsp;{{myData.peopleCounting}}&nbsp;&nbsp;&nbsp;&nbsp;·</h4>
                            <h4 class="lessonData">综合评分&nbsp;&nbsp;{{grade}}</h4>
                        </a-col>
                    </a-row>

                </a-col>

                <a-col :span="4">
                    <div style="float: right;margin-top: 25px;">
                        <a-button type="text" @click="collection" :style="{color: isCollection ? blue : white}">收藏</a-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a-button type="text" @click="share" style="color: white">分享</a-button>
                    </div>
                </a-col>

            </a-row>
            <div style="height: 4vh;"></div>
        </div>

        <!-- 导航 -->
        <a-row>
            <a-col :span="24">
                <a-card size="small" class="navigation">
                    <a-menu
                        v-model:selectedKeys="selectedKey"
                        theme="white"
                        mode="horizontal"
                        style="margin-left: 8em"
                        :style="{ lineHeight: '45px'}"
                    >
                        <a-menu-item key="1" style="font-weight: bolder">课程介绍</a-menu-item>
                        <a-menu-item key="2" style="font-weight: bolder">章节目录</a-menu-item>
                        <a-menu-item key="3" style="font-weight: bolder">评价({{evaluateLists.length}})</a-menu-item>
                    </a-menu>
                </a-card>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="17">
                <!-- 视图 -->
                <a-card size="small" class="views">
                    <!-- 课程介绍 -->
                    <div class="content" v-if="selectedKey == '1'" v-html="myData.lessonViews"></div>

                    <!-- 章节目录 -->
                    <div class="catalogue" v-if="selectedKey == '2'">
                        <h3 style="font-weight: bolder">课程目录</h3>
                        <a-divider />
<!--                        {{myData.catalogue}}-->
                        <div v-for="items in myData.chapter">
                            <h4 style="font-weight: bolder;margin-bottom: 10px;">{{items.title}}</h4>
                            <div v-for="item in items.period" style="list-style: none;" class="period" @click="toVideo(item.periodUrl,item.periodTitle,item.periodCover)">
                                <h5 style="margin-left: 2em;line-height: 40px;display: inline">{{item.periodTitle}}</h5>
                                <!--                                <video src="www.baidu.com">{{item.periodTitle}}</video>-->
                                <h5 v-if="!item.try" style="display: inline;float: right;line-height: 30px;margin-right: 2em;opacity: 0.6">{{item.periodTime}}</h5>
                                <a-button v-if="item.try"
                                          danger
                                          shape="round"
                                          size="small"
                                          style="display: inline;float: right;margin-right: 5px;margin-top: 5px"
                                          @click.stop="tryStart(item.periodTitle,item.periodUrl,item.periodCover)"
                                >试看</a-button>
                            </div>
                            <div style="margin-bottom: 10px"></div>
                        </div>
                    </div>

                    <!-- 评价 -->
                    <div class="evaluate" v-if="selectedKey == '3'">
                        <div >
                            <h4 style="margin-left: 1em;display: inline;font-weight: bolder" >评价区</h4>
                            <a-button type="primary" @click="showModel" round style="float: right;margin-bottom: 5px">我要评价</a-button>
                        </div>
                        <a-divider />
                        <a-row justify="space-around" align="middle">
                            <a-col :span="1" :offset="1">
                                <h3 style="font-weight: bolder">综合评分</h3>
                            </a-col>
                            <a-col :span="2">
                                <h1 style="font-size: 35px;margin-left: 10px;margin-top: 10px">{{grade}}</h1>
                            </a-col>
                            <a-col :span="8">
                                <a-rate style="margin-left: 10px" :value="myData.grade/2" allow-half disabled />
                            </a-col>
                            <a-col :span="4">
                                <h4 style="display: inline">内容实用&nbsp;&nbsp;</h4>
                                <h1 style="display:inline;color: orange">{{myData.practicalGrade}}</h1>
                            </a-col>
                            <a-col :span="4">
                                <h4 style="display: inline">逻辑清晰&nbsp;&nbsp;</h4>
                                <h1 style="display:inline;color: orange">{{myData.logicGrade}}</h1>
                            </a-col>
                            <a-col :span="4">
                                <h4 style="display: inline">视频清楚&nbsp;&nbsp;</h4>
                                <h1 style="display:inline;color: orange">{{myData.videoGrade}}</h1>
                            </a-col>
                        </a-row>
                        <a-divider />
                        <div class="evaluateLists">
                            <div v-if="!myData.evaluateLists">
                                <a-empty />
                            </div>
                            <div v-else-if="myData.evaluateLists" v-for="item in myData.evaluateLists" key="item.id">
                                <br>
                                <a-row>
                                    <a-col :span="1">
                                        <a-avatar size="large" :src="item.avatar" style="margin-top: 2vh;margin-left: 10px"/>
                                    </a-col>
                                    <a-col :span="11">
                                        <div style="margin-left: 30px">
                                            <h2>{{item.name}}</h2>
                                            <h3>{{item.evaluateContent}}</h3>
                                        </div>
                                    </a-col>

                                    <a-col :span="12">
                                        <div style="float: right">
                                            <a-rate style="display: inline" :value="item.grade/2" allow-half disabled />
                                            <h3 style="display: inline;margin-left: 10px;">{{item.grade}}分</h3>
                                            <h3 style="margin-top: 25px">时间：{{item.time}}</h3>
                                        </div>
                                    </a-col>
                                </a-row>
                                <br>
                                <a-divider></a-divider>
                            </div>
                            <br>
                            <a-pagination show-size-changer v-model:current="current" :total="total" show-less-items style="text-align: center"/>
                        </div>
                    </div>
                </a-card>
            </a-col>

            <a-col :span="6">
                <!-- 课程须知 -->
                <a-card size="small" class="notice">    <!-- 课程须知 -->
                    <a-button type="primary" block @click="join">
                        立即加入
                    </a-button>
                    <h3 style="padding-bottom: 5px;margin-top: 10px;font-weight: bolder" class="titles">课程须知:</h3>
                    <h3 style="padding-left: 20px;margin-right: 8px;opacity: 0.6" v-html="myData.lessonNotice">
                    </h3>
                </a-card>
                <!-- 相关推荐 -->
                <a-card size="small" class="recommend">   <!-- 相关推荐 -->
                    <h3 class="titles">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;推荐课程</h3>
                    <hr>
                    <div v-for="item in myData.recommend" style="margin-left: 15px" key="item.id">
                        <a-row class="avatar" >
                            <a-col :span="5">
                                <a-avatar  shape="square" size="large" :src="item.src"/>
                            </a-col>

                            <a-col :span="15" >
                                <a class="name" href="javascript:void(0)">
                                    <h5 style="opacity: 0.5">&nbsp;{{item.recommendTitle}}</h5>
                                </a>
                                <a class="name" href="javascript:void(0)">
                                    <h6 style="opacity: 0.5">&nbsp;{{item.recommendSubTitle}}</h6>
                                </a>
                                <br>
                            </a-col>
                        </a-row>
                    </div>
                </a-card>
            </a-col>
        </a-row>
        <div style="height: 1em;"></div>

        <!-- 视频播放框 -->
        <a-modal
            v-model:visible="videoVisible"
            :title="modelTitle"
            width="70%"
            wrap-class-name="full-modal"
            @ok="handleOk"
            destroyOnClose="true"
            footer=""
        >
            <div style="padding: 0;width: 100%;" class="prism-player" id="J_prismPlayer"></div>
        </a-modal>

        <!-- 评价框 -->
        <div>
            <a-modal
                v-model:visible="visible"
                title="评价"
                ok-text="确认"
                cancel-text="取消"
                @ok="handleOk"
            >
                <a-textarea
                    v-model:value="evaluateValue"
                    placeholder="请输入你的评价"
                    :auto-size="{ minRows: 2, maxRows: 5 }"
                />
            </a-modal>
        </div>
    </div>
</template>

<script>
import {computed, onBeforeMount, onBeforeUnmount, onMounted, reactive, toRefs} from "vue";
import axios from "axios";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";

export default {
    name: 'CourseInfo',
    setup(){
        const state = reactive({
            myData: {},            //接收数据存储
            currentPrice: 0,       //原价
            originalPrice: 0,      //现价
            selectedKey:['1'],
            summaryBK: "",  //课程信息背景
            current: 1,     //分页默认显示页
            total: 100,     //分页展示页面数量
            visible: false,      //评论框展示
            evaluateValue: '',      //评价内容
            evaluateLists: [],       //接收评价列表
            isCollection: false,    //收藏与否
            white: "white",        //未收藏的字体颜色
            blue: "blue",            //已收藏的字体颜色
            videoUrl:"",
            modelTitle:'',
            videoVisible: false,
            player: '',
        });

        const getCourseInfoData = function (){
            axios.get('/courseInfo.json').then(res =>{
                //console.log("getCourseInfoData" + JSON.stringify(res))
                state.myData = res.data.data
                state.currentPrice = state.myData.currentPrice.toFixed(2)
                state.originalPrice = state.myData.originalPrice.toFixed(2)
                state.selectedKey = state.myData.selectedKey
                state.summaryBK = state.myData.summaryBK
                state.evaluateLists = state.myData.evaluateLists
                //console.log("myData" + JSON.stringify(state.myData))
            }).catch(error =>{
                console.log("错误" + error)
            })
            // const appData = require('../../public/courseInfo.json')
            // res = appData.data
        }
        onBeforeMount(()=>{
            getCourseInfoData()
        });

        onMounted(()=>{

        });

        const grade = computed(()=>{
            let averageGrade = (state.myData.practicalGrade + state.myData.logicGrade + state.myData.videoGrade )/3
           return averageGrade.toFixed(1)
        });

        const router = useRouter()
        const toVideo = function (url,title,cover){
            window.localStorage.setItem('url',url)
            window.localStorage.setItem('cover',cover)
            window.localStorage.setItem('title',JSON.stringify(title))
            router.push({name: 'Video',params:{url,title,cover}})
            console.log(url)
        }

        const join =() =>{
            message.success('加入课程成功');
        };

        const showModel = () =>{
            state.visible = true;
        };

        const collection = function () {
           state.isCollection = !state.isCollection
           if(state.isCollection){
               message.success('已收藏')
           } else{
               message.success('取消收藏')
           }

        };

        const share = () =>{
            message.success('已分享')
        };

        const loadVideo = function () {
            state.player && state.player.dispose()
            console.log();
            tryStart();
        }
        const tryStart = function (title,url,cover,) {
            state.modelTitle = title
            state.videoVisible = true
            console.log('123')
            setTimeout(()=>{
                state.player = new Aliplayer({
                    id: "J_prismPlayer",
                    source: url,
                    width: "100%",
                    height: "500px",
                    cover: cover,
                    components:[{
                        name: 'PreviewVodComponent',
                        type: AliPlayerComponent.PreviewVodComponent,
                        args: [60, '#endPreviewTemplate', `<a href="javascript:void(0)" class="vip-join">加入课程</a> 观看完整视频`]
                    }],
                    /* To set an album art, you must set 'autoplay' and 'preload' to 'false' */
                    autoplay: false,
                    preload: false,
                    isLive: false
                }, function (player) {
                    console.log("The player is created");
                });
            },100)
        };

        const handleOk = () => {
            state.confirmLoading = true;
            setTimeout(() => {
                state.visible = false;
                state.confirmLoading= false;
            }, 500);
        };

        return{
            // lessonTitle,subtitle,grade,lecturer,description,currentPrice,originalPrice,peopleCounting,selectedKey,primary,text,recommend,
            ...toRefs(state),
            grade,
            join,
            collection,
            showModel,
            handleOk,
            tryStart,
            loadVideo,
            share,
            toVideo
        }
    }
}
</script>

<style scoped>
.body{
    width: 100%;
    height: auto;
    background-color: whitesmoke;
}
.summary{
    width: 100%;
    height: auto;
}
.summary-item{
    margin-left: 10%;
    margin-top: 40px;
}
.lessonData{
    display: inline;margin-left: 13px; color: white;
}
.navigation{
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
}

.views{
    height: auto;
    background-color: white;
    margin-left: 10%;
    margin-top: 30px;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 10px;
}

.notice{
    height: auto;
    background-color: white;
    margin-left: 15px;
    margin-right: 8vh;
    margin-top: 30px;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 10px;
}

.recommend{
    height: auto;
    background-color: white;
    margin-left: 15px;
    margin-top: 30px;
    margin-right: 8vh;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 10px
}
.period:hover{
    background-color: whitesmoke;
}

.ant-menu-horizontal{
    border: 0;   /* 导航下面的虚线*/
}

.ant-breadcrumb-separator{
    color: white;    /* 面包屑的颜色 */
}
.ant-divider-horizontal{
    margin: 5px;
}

.vip-join {
    color: #00c1de;
}

.vip_limit_content .title {
    font-size: 18px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    width: 100%;
}

.vip_limit_close span {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 36px;
    background: rgba(165, 165, 165, 0.54);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
}
</style>
